<template>
	<div class="mainContent">
		<pathTracking :path='Model.path' />
		<div class="addcont">
			<div class="add" @click="newPage">
				<img class="plus" src="@/assets/img/button_plus.png" alt="">
				<p class="font">新建订单</p>
			</div>
		</div>
		<div class="contant">
			<div class="searchbox">
				<card :configArr="Model.configArr" @changingCondition="cardEmit"></card>
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">查询条件</div>
					</div>
				</el-row>
				<!-- 搜索框 -->
				<advancedSearch :option="Model.filterOption" @getChild="showChild" @onSearch="toSearch" @onClear="toClear"
				 @onExport="toExport"></advancedSearch>
			</div>
			<!--  -->
			<!-- 表格 -->
			<div class="table">
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">客户订单列表</div>
						<div class="common-btn-group">
							<div class="common-table-btn-item">打印</div>
						</div>
					</div>
				</el-row>
				<el-row class="table-bg">
					<el-table :data="Model.tableData" stripe border :row-style="selectedHighlight" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="50" fixed></el-table-column>
						<el-table-column label="订单单号" align="center" width="180">
							<template slot-scope="scope">
								<el-button type="text" @click="toDetial(scope.row)"><a class="detial-link">{{scope.row.saleNumber}}</a></el-button>
							</template>
						</el-table-column>
						<el-table-column v-for="(item,index) in Model.tableHeaderData" :key="item.prop" :prop="item.prop" :label="item.label"
						 :width="item.width" align="center">
						</el-table-column>
						<el-table-column label="操作" align="center" fixed="right" width="200">
							<template slot-scope="scope">
								<div class="btnGroup">
									<div class="operate-btn" @click="orderPay(scope.row)"  v-if="scope.row.payStatus == 0 || scope.row.payStatus == 1">支付</div>
									<div class="operate-btn" @click="changeOrderStatus(scope.row,'取消订单')" v-if="scope.row.orderStatus == 0">取消订单</div>
									<!-- <div class="operate-btn" @click="changeOrderStatus(scope.row,'发货')"  v-if="scope.row.orderStatus == 2">发货</div> -->
									<div class="operate-btn" @click="changeOrderStatus(scope.row,'核销')" v-if="scope.row.orderStatus == 3">核销</div>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</el-row>
				<!--  -->
				<el-row class="pagination-cont">
					<el-pagination :pager-count="5" @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page="Model.paginationObject.currentPage"
					 :page-sizes="[10, 20, 30, 40]" :page-size="Model.paginationObject.pageSize" layout="sizes, prev, pager, next, jumper, slot"
					 :total="Model.paginationObject.total">
						<div class="pagination-slot">
							显示
							<p class="slot-i">{{Model.paginationObject.num1}}</p>
							到
							<p class="slot-i">{{Model.paginationObject.num2}}</p>
							，共
							<p class="slot-i">{{Model.paginationObject.total}}</p>
							记录
						</div>
					</el-pagination>
				</el-row>
			</div>
		</div>
		<!-- 支付弹框 -->
		<el-dialog :visible.sync="Model.dialogFormVisible" top="100px" class="viewDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">添加收款明细</div>
			</div>
			<div style="padding:30px;background: #fff;">
				<el-form :model="Model.dialogForm">
					<el-form-item label="支付方式：">
						<el-select size="small" v-model="Model.dialogForm.paymentMethod" placeholder="请选择支付方式" style="width:200px">
							<el-option label="支付宝" value="1"></el-option>
							<el-option label="现金" value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="流水号：">
						<el-input size="small" v-model="Model.dialogForm.serialNumber"></el-input>
					</el-form-item>
					<el-form-item label="支付金额：">
						<el-input size="small" v-model="Model.dialogForm.payMoney"></el-input>
					</el-form-item>
					<el-form-item label="支付日期：">
						<el-date-picker size="small" v-model="Model.dialogForm.createTime" type="datetime" placeholder="选择日期时间" style="width:200px">
						</el-date-picker>
					</el-form-item>
				</el-form>
				<div class="viewDialogFooter">
					<div class="viewDialogFooterSure" @click="comfirmPay">确定</div>
					<div class="viewDialogFooterCancel" @click="Model.dialogFormVisible = false">取消</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import pathTracking from '@/components/common/pathTracking'
	import card from '@/components/common/filterBtns'
	import advancedSearch from "@/components/common/filter/advancedSearch";

	import {
		getDateString
	} from "@/assets/js/common.js"
	import Model from './model.js'
	import Controller from './controller.js'
	export default {
		name: "spotOrder",
		mixins: [Model, Controller],
		components: {
			pathTracking,
			card,
			advancedSearch
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
